<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Place Photos</title>

        <link rel="stylesheet" href="css/gmaps/default.css" type="text/css" />
        <link rel="stylesheet" href="css/token/token-input.css" type="text/css" />
        <link rel="stylesheet" href="css/token/token-input-facebook-2.css" type="text/css" />

        <style>
            a {color:#404042;text-decoration:none;}      /* unvisited link */
            a:visited {color:#404042;}  /* visited link */
            a:hover {color:#404042;}  /* mouse over link */
            a:active {color:#404042;}  /* selected link */
        </style>

        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
        <script type="text/javascript" src="js/jquery/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="js/token/jquery.tokeninput.js"></script>  
        <script type="text/javascript" src="js/page/geocoder.js"></script>  
                
    </head>

    <body style="text-align: center; background-color: #FAFAFA; color: #404042; font-family: Century Gothic, Calibri, Verdana; padding: 0px; margin: 0px;">                

        <div style="margin-top: 0px; background-color: white;">

            <%@include file="header.jsp" %>

            <div style="width: 100%; text-align: left; font-family: Century Gothic, Calibri, Verdana; color: #404042; background-color: white; background: url('${model.props.appPath}/img/content-bg-short.jpg'); background-repeat: repeat-x; display: block; position: relative; top: -2px;">

                <div style="width: 1020px; margin-top: 10px; margin: 0 auto;">

                    <br>

                    <table border='0' style="width: 100%;">
                        <tr>
                            <td style="margin-top: 5px; top: 10px; vertical-align: middle;" valign="middle">
                                <h1>&nbsp;Manage Place Photos</h1>
                            </td>
                            <td align='right'></td>
                        </tr>
                    </table>
                    
                    <hr>
                    
                    <br><br>
                    
                    <c:if test="${fn:length(model.place.photos) > 0}">
                        <fieldset>
                             <legend><span style="font-size: 20px; font-weight: bold;">Current Photos</span> (First photo is primary as default)</legend>
                        
                        <table cellpadding="5" cellspacing="5" style="margin-left: 20px;">
                            <tr>
                                <td>
                                    <c:set var="i" value="1"></c:set>
                                    <c:forEach items="${model.place.photos}" var="photo">
                                        
                                        <div style="max-width:300px; width:300px; float:left; margin: 10px; border: 0px solid black; background-color: #ececec; ">
                                            
                                            <img src="${model.props.rootPath}/uploads/img/${photo.filename}" alt="${photo.filename}" style="height:200px; width:300px"></img>
                                            <br><br>
                                            <form>
                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                &nbsp;&nbsp;&nbsp;&nbsp;
                                                <input type="submit" value=" Delete Photo " />
                                                <input type="hidden" name="a" value="1002" />
                                                <input type="hidden" name="placeID" value="${model.place.id}" />
                                                <input type="hidden" name="photoID" value="${photo.id}" />                                
                                            </form>
                                        </div>
                                        <c:set var="i" value="${i+1}"></c:set>
                                    </c:forEach>
                                </td>
                            </tr>
                        </table>   
                        </fieldset>
                    </c:if>
                       
                        
                    <c:if test="${fn:length(model.place.photos) <= 0}">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <i>No photos yet. Use the forms below to start uploading.</i>
                        <br><br>
                    </c:if>
                                                  
                    <br><br>

                    <form action="place.htm" method="post" enctype="multipart/form-data">
                        <fieldset>
                            
                            <legend style="font-size: 20px; font-weight: bold;">Add Photos</legend>
                            
                            <br>
                            
                            <table cellspacing="5" cellpadding="5" border="0">
                                <tr>
                                    <td><label for="filename_1">Photo 1: </label></td>
                                    <td><input id="filename_1" type="file" name="filename_1" size="100" style="border: 1px solid #cacaca; width: 400px; padding: 3px;"/></td>
                                </tr>
                                <tr>
                                    <td><label for="filename_2">Photo 2: </label></td>
                                    <td><input id="filename_2" type="file" name="filename_2" size="100" style="border: 1px solid #cacaca; width: 400px; padding: 3px;"/></td>
                                </tr>
                                <tr>
                                    <td><label for="filename_3">Photo 3: </label></td>
                                    <td><input id="filename_3" type="file" name="filename_3" size="100" style="border: 1px solid #cacaca; width: 400px; padding: 3px;"/></td>
                                </tr>
                                <tr>
                                    <td><label for="filename_4">Photo 4: </label></td>
                                    <td><input id="filename_4" type="file" name="filename_4" size="100" style="border: 1px solid #cacaca; width: 400px; padding: 3px;"/></td>
                                </tr>
                                <tr>
                                    <td><label for="filename_5">Photo 5: </label></td>
                                    <td><input id="filename_5" type="file" name="filename_5" size="100" style="border: 1px solid #cacaca; width: 400px; padding: 3px;"/></td>
                                </tr>
                                <tr>
                                    <td><label for="filename_6">Photo 6: </label></td>
                                    <td><input id="filename_6" type="file" name="filename_6" size="100" style="border: 1px solid #cacaca; width: 400px; padding: 3px;"/></td>
                                </tr>
                                <tr>
                                    <td><label for="filename_7">Photo 7: </label></td>
                                    <td><input id="filename_7" type="file" name="filename_7" size="100" style="border: 1px solid #cacaca; width: 400px; padding: 3px;"/></td>
                                </tr>
                                <tr>
                                    <td><label for="filename_8">Photo 8: </label></td>
                                    <td><input id="filename_8" type="file" name="filename_8" size="100" style="border: 1px solid #cacaca; width: 400px; padding: 3px;"/></td>
                                </tr>
                                <tr>
                                    <td><label for="filename_9">Photo 9: </label></td>
                                    <td><input id="filename_9" type="file" name="filename_9" size="100" style="border: 1px solid #cacaca; width: 400px; padding: 3px;"/></td>
                                </tr>
                                <tr>
                                    <td><label for="filename_10">Photo 10: </label></td>
                                    <td><input id="filename_10" type="file" name="filename_10" size="100" style="border: 1px solid #cacaca; width: 400px; padding: 3px;"/></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td align="right">                                        
                                        <input type="submit" value=" Upload Photos " style="padding: 3px;"/>
                                        <input type="hidden" name="a" value="1001" />
                                        <input type="hidden" name="s" value="1" />
                                        <input type="hidden" name="id" value="${model.place.id}" />  
                                    </td>
                                </tr>
                            </table>
                            
                            <br>        
                             
                            
                            
                        </fieldset>
                    </form>
                        
                    <br><br>  

                    <br><br>  
                    
                </div>

                <br><br>                

            </div>

            <div>
                <img src="${model.props.appPath}/img/footer-foot.jpg" style="border: 0px solid black; display: block; width: 100%;" />
            </div>

        </div>

    </body>

</html>
